// 创建路由器

// 引入createRouter
import { createRouter, createWebHistory } from "vue-router";

// 引入组件
import Note from "../components/note.vue";
import Demo from "../components/demo.vue";
import Detail from "../components/detail.vue";
import Home from "../components/home.vue";

import Props from "@/pages/01_props/Father.vue";
import Event from "@/pages/02_custom-event/Father.vue";
import Bus from "@/pages/03_mitt/Father.vue";
import Model from "@/pages/04_v-model/Father.vue";
import AttrsListeners from "@/pages/05_$attrs/Father.vue";
import RefChildrenParent from "@/pages/06_$refs-$parent/Father.vue";
import ProvideInject from "@/pages/07_provide-inject/Father.vue";
import Slot from "@/pages/08_slot_具名插槽/Father.vue";

import Login from "@/views/login.vue";
import Register from "@/views/register.vue";

// 创建路由器
const router = createRouter({
  history: createWebHistory(), // 路由器工作模式
  routes: [
    // 路由规则
    {
      path: "/note",
      name: "note",
      component: Note,
      children: [
        // 子路由
        {
          name: "detail",
          path: "detail/:id/:title/:content", // params传参
          // path: "detail", // 子集不需要‘/’

          component: Detail,
          // props: true,// 将路由收到的所有params参数作为props传给Detail组件
          props(route) {
            // 函数写法，自定义props
            return route.params;
          },
        },
      ],
    },
    {
      path: "/demo",
      name: "demo",
      component: Demo,
    },
    {
      name: "home",
      path: "/home",
      component: Home,
    },
    {
      path: "/",
      redirect: "/home", // 访问根路径（"/"）时，将自动重定向到"/home"路径
    },

    {
			path: '/props',
			component: Props
		},
		{
			path: '/event',
			component: Event
		},
		{
			path: '/mitt',
			component: Bus
		},
		{
			path: '/model',
			component: Model
		},
		{
			path: '/attrs',
			component: AttrsListeners
		},
		{
			path: '/ref-parent',
			component: RefChildrenParent
		},
		{
			path: '/provide-inject',
			component: ProvideInject
		},
		{
			path: '/slot',
			component: Slot
    },
    {
      path: "/login",
      name: "login",
      component: Login,
    },
    {
      path: "/register",
      name: "register",
      component: Register,
    },
  ],
});

// 暴露路由器
export default router;
